<template>
	<view class="work-order--default__card" @click="onCard">
		<fui-row class="work-order__header">
			<fui-col :span="4" class="work-order__header--tag">
				<fui-tag theme="light">
					{{itemData.rangeTypeToName || itemData.rangeTypeName}}
				</fui-tag>
				<!-- <t-tag variant="light" theme="primary">主要</t-tag>
	            <t-tag variant="light" theme="warning">警告</t-tag>
	            <t-tag variant="light" theme="danger">危险</t-tag>
	            <t-tag variant="light" theme="success">成功</t-tag> -->
			</fui-col>
			<fui-col :span="14" class="work-order__header--time">
				{{itemData.repairTime}}
			</fui-col>
			<fui-col :span="6" class="work-order__header--state">
				{{itemData.currStateToName}}
				<slot name="headerRight"></slot>
			</fui-col>
		</fui-row>
		<view class="work-order__body" catchtap="onCard">
			<view class="work-order__body--title">
				{{itemData.faultRemark}}
			</view>
			<view class="work-order__body--content">
				<custom-preview-text-content label="报修科室" :content="itemData.deptName"></custom-preview-text-content>
				<custom-preview-text-content label="报修人" :content="itemData.user"
					openUpMarginBottom="false"></custom-preview-text-content>
			</view>
			<view class="work-order__body--other" v-if="itemData.appointment">
				<custom-preview-text-content label="预约时间" :content="itemData.appointment"
					openUpMarginBottom="false"></custom-preview-text-content>
			</view>
		</view>
		<view>
			<slot name="footer"></slot>
		</view>
	</view>

</template>

<script>
	export default {

		props: {

			itemData: {
				type: Object,
				default: () => {}
			}
		},
		emits: ['click'],
		data() {
			return {

			};
		},

		methods: {

			onCard() {
				this.$emit('click', this.itemData)
			}
		},
	}
</script>

<style lang="scss">
	.work {
		&-order {
			&--default {
				&__card {
					background: #ffffff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					padding: 24rpx 32rpx 32rpx 32rpx;



				}
			}

			&__header {
				height: 40rpx;
				display: flex;
				align-items: center;

				&--tag {
					//
				}

				&--time {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.4);
					padding-left: 16rpx !important;
				}

				&--state {
					font-size: 28rpx;
					font-weight: 600;
					color: #d54941;
					line-height: 44rpx;
					text-align: right;
				}
			}

			&__body {
				padding-top: 34rpx;

				&--title {
					font-size: 36rpx;
					font-weight: 600;
					color: rgba(0, 0, 0, 0.9);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					align-content: center;
				}

				&--content,
				&--other {
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					padding: 24rpx 34rpx;
				}

				&--content {
					margin-top: 24rpx;
					background: #f3f3f3;
				}

				&--other {
					margin-top: 16rpx;
					background: #fff1e9;
				}
			}
		}
	}
</style>